<!doctype html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
	<link rel="stylesheet" type="text/css" href="css/search-form.css">
	<link rel="stylesheet" type="text/css" href="css/barrager.css">
</head>

<body>
    <div class='bg-container'></div>
    <div class='bg-container-gs'></div>
    <section class="htmleaf-container">
        <form onsubmit="submitFn(this, event);">
            <div class="search-wrapper">
                <div class="input-holder">
                    <input type="text" class="search-input" placeholder="吃的、喝的" />
                    <button class="search-icon" onclick="searchToggle(this, event);"><span></span></button>
                </div>
                <span class="close" onclick="searchToggle(this, event);"></span>
                <div class="result-container">

                </div>
            </div>
        </form>
    </section>

    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/fs.js"></script>
	<script src="js/jquery.barrager.min.js"></script>
    <script type="text/javascript">
		
		var texts=[
			"刘苗苗！",
			"你敢吃一下试试！",
			"这个你不能吃！",
			"刘苗苗，你敢吃？",
			"你敢吃？你给我等着！",
			"就这么看着你(*+﹏+*)~@",
			"(︶︿︶)",
			"b（￣▽￣）d",
			"(=^_^=)",
			"(T_T)",
			"你敢吃么？(︶︿︶)",
			"不能吃！！！",
			"嘌呤超标！！！",
			"减肥！减肥！减肥！",
			"敢吃剁手！",
		];
		
		
		function getRandomInt(min, max) {
			var arr = []; //原数组 
			//给原数组Arr赋值 
			for (var i = min; i <= max; i++) {
			  arr[i] = i + 1;
			}
			
			arr.sort(function () {
				return 0.5 - Math.random();
			});
			return arr[0];
		}
		for(var i=0;i<getRandomInt(5,20);i++){
			var text = texts[Math.floor(Math.random()*texts.length)];
			$('body').barrager({
			   info:text, //文字 
			   close:true, //显示关闭按钮 
			   href:'javascript:void(0);',
			   speed:getRandomInt(3,30), //延迟,单位秒,默认6 
			   old_ie_color:'#000000', //ie低版兼容色,不能与网页背景相同,默认黑色 
			 });
		}
	
	
	
        function searchToggle(obj, evt) {
            var container = $(obj).closest('.search-wrapper');

            if (!container.hasClass('active')) {
                container.addClass('active');
                evt.preventDefault();
            }
            else if (container.hasClass('active') && $(obj).closest('.input-holder').length == 0) {
                container.removeClass('active');
                // clear input
                container.find('.search-input').val('');
                // clear and hide result container when we press close
                //$('body').css('background', 'url(img/image.jpg)');
                $('.bg-container').animate({ opacity: '0' }, 500, function () {
                    $('.bg-container').animate({ background: 'url(img/image.jpg)' }, 500, function () {
                        $('.bg-container').animate({ opacity: '1' }, 500);
                    });

                });


                container.find('.result-container').fadeOut(300, function () {
                    $(this).empty();
                    container.animate({ top: '50%' }, 300);
                });
            }
        }

        function submitFn(obj, evt) {
            value = $(obj).find('.search-input').val().trim();
            _html = "";
            if (!value.length) {
                return;
            }
            
			let foods = FoodsPurine.filter(m =>{
				
				var reg = new RegExp(value);
				 //如果字符串中不包含目标字符会返回-1
				if(m.name.match(reg)||(m.desc&&m.desc.match(reg))){
					return true;
				}
				return false;
			});
			

            if (!foods || !foods.length) {
                _html += "<b>没有查询到，换个名字试试！</b>";
            } else {
                foods.sort((a, b) => {
                    return b.value - a.value;
                });
                _html += `<b>每100g食物嘌呤含量</b><br>`;
                foods.forEach(element => {
                    _html += `<b>${element.name}(${element.value}mg)</b><br>`;
                });
                //改变背景色
                if (foods[0].value < 25) {
                    //绿色
                    $('.bg-container').animate({ opacity: '0.3' }, 1000, function () {
                        $('.bg-container').css('background', '#598901');
                        $('.bg-container').animate({ opacity: '1' }, 1000);
                    });

                } else if (foods[0].value >= 25 && foods[0].value < 150) {
                    //橙色
                    $('.bg-container').animate({ opacity: '0.3' }, 1000, function () {
                        $('.bg-container').css('background', '#FEC904');
                        $('.bg-container').animate({ opacity: '1' }, 1000);
                    });
                } else {
                    //红色
                    $('.bg-container').animate({ opacity: '0.3' }, 1000, function () {
                        $('.bg-container').css('background', '#BC4B00');
                        $('.bg-container').animate({ opacity: '1' }, 1000);
                    });
                }
            }

            $(obj).find('.result-container').html('<span>' + _html + '</span>');
            $(obj).find('.search-wrapper').animate({ top: '30%' }, 300, function () {
                $(obj).find('.result-container').fadeIn(300);
            });
            evt.preventDefault();
        }
    </script>
</body>

</html>